<html>
	<head>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

		<script language="Javascript">
			 var jcrop_api;
			jQuery(window).load(function(){
			 
				var i, ac;

				initJcrop();
				
				function initJcrop()//{{{
				{
					jcrop_api = $.Jcrop('#cropbox');
			jcrop_api.aspectRatio=1.25;
			

				//thecropper = jQuery('#cropbox').Jcrop({
					//onChange: showPreview,
					//onSelect: showPreview,
				//	aspectRatio: 1,
					//setSelect: [ 0, 0, p_width, p_height ]
					
				};

			});
      
			// Our simple event handler, called from onChange and onSelect
			// event handlers, as per the Jcrop invocation above
			function showPreview(coords)
			{
        //var curr_coord = tellScaled();
        //setSelect([curr_coord.x,curr_coord.y,curr_coord.x+thumbnail_w, curr_coord.y+thumbnail_h]);
       
					//alert(			curr_coord.w);
				
				if (parseInt(coords.w) > 0)
				{
					 jQuery('#position').html(coords.w+'h:'+
					                          coords.h+'x:'+
					                          coords.x+'y:'+
					                          coords.y); 
//					var rx = 100 / coords.w;
//					var ry = 100 / coords.h;
//
//					jQuery('#preview').css({
//						width: Math.round(rx * 500) + 'px',
//						height: Math.round(ry * 370) + 'px',
//						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
//						marginTop: '-' + Math.round(ry * coords.y) + 'px'
//					});
				}
			}

    function show_preview(aspect_ratio, p_width, p_height, position){

    	var tx=0,ty=0,tw= p_width,th= p_height;

    	p_ratio = p_width/p_height;
    	if (p_ratio>aspect_ratio){
    		//tx/ty = aspect_ratio *
    		tw = p_height * aspect_ratio;
    		tx = (p_width-tw) * position/100;
    		//alert('X:'+tx);
    	} else {
    		th = p_width / aspect_ratio;
    		ty = (p_height-th) * position/100;
    		//alert('Y:'+ty);
    	}
    	
    	alert('x:'+tx+'y:'+ty+'w:'+tw+'h:'+th);
    	jcrop_api.aspect_ratio = aspect_ratio;
    	//thecropper.setSelect([tx,ty,tw,th]);
    	jcrop_api.setSelect([parseInt(tx),parseInt(ty),parseInt(tw+tx),parseInt(th+ty)]);
			// Remember to invoke within jQuery(window).load(...)
			// If you don't, Jcrop may not initialize properly
    } // end of function show_preview
    
    //show_preview(1.25, 500, 370, 50);
		</script>

	</head>

	<body>

	<div id="outer">
	<div class="jcExample">
	<div class="article">

		<h1>Jcrop - Aspect ratio lock w/ preview pane</h1>

		<!-- This is the image we're attaching Jcrop to -->
		<table>
		<tr>
		<td>
		<img src="demo_files/flowers.jpg" id="cropbox" />
		</td>
		<td>
		<!--div style="width:100px;height:100px;overflow:hidden;">
			<img src="demo_files/flowers.jpg" id="preview" />
		</div-->	<div id="position"></div>
		
		<input type=text value="50" id="position_setting" onChange="change_position(this.value)">

  	<script language="Javascript">	
  		function change_position(value){
  		  //jQuery('#position').value;
  		   show_preview(1.25, 500, 370, value);
  	  } 
		//show_preview(1.25, 500, 370, 50);
		</script>

		</td>
		</tr>
		</table>

		<p>
			<b>An example with aspect ratio locking and preview pane.</b>
			Obviously the most visual demo, the preview pane is accomplished
			entirely outside of Jcrop with a simple jQuery-flavored callback.
			This type of interface could be useful for creating a thumbnail
			or avatar. The onChange event handler is used to update the
			view in the preview pane.
		</p>

		<div id="dl_links">
			<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
			<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
		</div>


	</div>
	</div>
	</div>
	</body>

</html>
